<template>
	<div>
		<el-card>
			<el-table :data="tableData" stripe border style="width: 100%">
				<el-table-column prop="cid" label="教室id">
				</el-table-column>
				<el-table-column prop="createtime" label="申请日期">
				</el-table-column>
				<el-table-column prop="date" label="使用日期">
				</el-table-column>
				<el-table-column label="申请使用时间段" prop="classroom.apply">
					<template slot-scope="scope">
						<div v-for="(item, index) in tableData[scope.$index].classroom.apply" :key="index">
							<p>{{ item }}</p>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="reason" label="申请原因">
				</el-table-column>
				<el-table-column prop="aid" label="处理人id" width="180">
				</el-table-column>
				<el-table-column prop="handletime" label="处理时间" width="180">
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="100">
					<template slot-scope="scope">
						<el-button @click="handleClick(scope.row)" type="text" size="small" :disabled="!((!tableData[scope.$index].cancel)&&(new Date().getDate()<parseInt(tableData[scope.$index].date.slice(2).slice(0,-1))))">取消预约
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			
			<el-dialog title="取消理由" :visible.sync="dialogC" :append-to-body="true">
				<el-form :model="form">
					<el-form-item>
						<el-input v-model="form.no" autocomplete="off" placeholder="请输入取消原因"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogC = false">取 消</el-button>
					<el-button type="primary" @click="ok1()">确 定</el-button>
				</div>
			</el-dialog>
			<!--分页-->
			<el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="size"
				layout="total, prev, pager, next" :total="total">
			</el-pagination>
		</el-card>
	</div>
</template>

<script>
	import {
		getAsk,
		cancelAsk,
	} from '../../api/system.js'
	
	import{getUserInfo} from '../../api/system.js'
	export default {
	    data() {
	      return {
	        tableData: [],
			size: 7,
			currentPage: 1,
			total: 0,
			user:{
				id:undefined,
			},
			id:undefined,
			flag: false,
			dialogC:false,
			form:{
				row:undefined,
				no:'',
			},
	      }
	    },
		methods:{
			getAsks(current){
				getAsk(this.user.id,current,this.size).then(res=>{
					
					this.tableData = res.data1;
					this.total = res.data2;
				})
				
			},
			handleCurrentChange(val) {
				this.getAsks(val);
			},
			getUid(){
				getUserInfo().then(res=>{
					this.user = res.data1;
				})
				console.log(this.user.id)
			},
			handleClick(row){
				this.form.row = row;
				this.dialogC =true;
			},
			ok1(){
				cancelAsk(this.form.row.id,this.form.no).then(res=>{
					this.dialogC = false;
					// console.log(res);
					this.$message('取消预约成功');
					this.getAsks(this.currentPage);
				}).catch(err=>{
					this.$message(err.message);
				})
			}
		},
		created(){
			getUserInfo().then(res=>{
				this.user = res.data1;
				this.getAsks(this.currentPage);
			})
		},
		
	  }
</script>

<style>
</style>
